import React, { Component } from 'react';
import './Buttom.css'




export default  class Buttom extends Component {
    changaeFormData =  (value,key)=>{
        let bol = value == 'true'
        //把allNumber的数量等于list的数组长度
        let {onAllChoose} = this.props
        onAllChoose(!bol)
        this.setState({[key]:!bol})
    }
    clearAllCompalte = ()=>{
        let {onClearAllCompalte } = this.props
        onClearAllCompalte()
    }
    render() {
        let {thingsList} =this.props 
        let hasChooseList = thingsList.filter(item=>{
            return item.checked
        })
        let allChecked = hasChooseList.length == thingsList.length && hasChooseList.length != 0

        return (
            <>
              <div className='flex-box'>
                <div>
                    <input
                        className='all-choose'
                        type="checkbox"
                        value={allChecked}
                        checked={allChecked}
                        onChange={(e)=>this.changaeFormData(e.target.value,"allChecked")}
                    />
                    <span>已完成{hasChooseList.length}</span>
                    <span className='margin-l-r'>/</span>
                    <span>全部{thingsList.length}</span>
                </div>
                <div className={hasChooseList.length <=0?'nonecss':''}>
                    <button className='all-del' onClick={this.clearAllCompalte}>清除已完成任务</button>
                </div>
              </div>
           </>
        );
    }
}

